import React, { useState, useEffect } from 'react';
import { Button, Card, Tooltip, message } from 'antd';
import PageEmpty from '@/components/PageEmpty';
import * as api from '@/services/GatewayNewsMgr';
import styles from './index.less';

const initialState = {
  emptyMsg: '加载中...',
  data: [],
};
const TodoListMobilePc = props => {
  const { taskId } = props.location.query; // 获取url 的taskId
  const [state, setState] = useState(initialState);
  useEffect(() => {
    setState({
      ...state,
      emptyMsg: '加载中...',
    });
    if (taskId) {
      const params = {
        instanceId: taskId,
        projectId: '',
        todoTypeCode: '',
      };
      api.getPcToDoUsingGET({ params }).then(result => {
        if (result && result.code === 1) {
          setState({
            ...state,
            emptyMsg: result.data.length <= 0 ? '暂无数据' : '',
            data: result.data,
          });
        } else {
          setState({
            ...state,
            emptyMsg: result.message,
          });
        }
      });
    } else {
      setState({
        ...state,
        emptyMsg: '加载失败',
      });
    }
  }, [taskId]);
  const judgeToDoType = type => {
    let str = '';
    if (Number(type) === 0) str = '待处理';
    if (Number(type) === 1) str = '已处理';
    if (Number(type) === 2) str = '已删除';
    return str;
  };
  // 处理待办
  const handlerToDoInfo = () => {
    if (taskId) {
      const params = {
        instanceId: taskId,
        operatorType: '4',
        projectId: '',
        todoTypeCode: '',
      };
      api.cleanPcToDoUsingGET({ params }).then(result => {
        if (result && result.code === 1) {
          message.success(result.message, 1, () => {
            if (navigator.userAgent.indexOf('MSIE') > 0) {
              // close IE
              if (navigator.userAgent.indexOf('MSIE 6.0') > 0) {
                window.opener = null;
                window.close();
              } else {
                window.open('', '_top');
                window.top.close();
              }
            } else {
              // close chrome;It is effective when it is only one.
              window.location.href = '';
              window.open('', '_self');
              window.close();
            }
          });
        }
      });
    } else {
      message.warning('没有待办实例ID');
    }
  };

  return (
    <div className={styles['xh-todo-list-pc']}>
      <Card title="消息待办详情">
        {state.data && state.data.length > 0 ? (
          <div className="xh-list">
            <p className="xh-list-content">
              <span className="xh-list-content-key">待办内容:</span>
              <Tooltip
                placement="top"
                title={<span className="xh-list-content-value">{state.data[0].content}</span>}
              >
                <span className="xh-list-content-value">{state.data[0].content}</span>
              </Tooltip>
            </p>
            <p className="xh-list-content">
              <span className="xh-list-content-key">状态:</span>
              <Tooltip
                placement="top"
                title={
                  <span className="xh-list-content-value">
                    {judgeToDoType(state.data[0].todoStatus)}
                  </span>
                }
              >
                <span className="xh-list-content-value">
                  {judgeToDoType(state.data[0].todoStatus)}
                </span>
              </Tooltip>
            </p>
            <p className="xh-list-content">
              <span className="xh-list-content-key">创建时间:</span>
              <Tooltip
                placement="top"
                title={<span className="xh-list-content-value">{state.data[0].updateTime}</span>}
              >
                <span className="xh-list-content-value">{state.data[0].updateTime}</span>
              </Tooltip>
            </p>
          </div>
        ) : (
          <></>
        )}
        {state.data.length > 0 ? (
          <div className="xh-footer-actions">
            <Button
              size="small"
              type="primary"
              disabled={state.data[0].todoStatus !== '0'}
              onClick={handlerToDoInfo}
            >
              知道了
            </Button>
            <Button
              size="small"
              className="yellow-button"
              target="_blank"
              href={`${process.env.apiUrl}`}
              disabled={state.data[0].todoStatus !== '0'}
            >
              进入供销存
            </Button>
          </div>
        ) : null}
      </Card>
      {state.data.length <= 0 ? (
        <div className="xh-loading">
          {state.emptyMsg === '加载中...' ? <div className="xh-loading-mask" /> : null}
          <PageEmpty emptyTitle={state.emptyMsg} />
        </div>
      ) : null}
    </div>
  );
};

export default TodoListMobilePc;
